<!-- 执行设备 -->
<template>
  <div class="main-conent-minheight">
    <div class="el-card__body">
      <el-table
        :data="filteredData"
        responsive
        :row-class-name="tableRowClassName"
        :row-style="selectedstyle"
        v-loading="loading"
        ref="table"
        style="font-size: 14px; width: 99%"
        border
        :height="tableHeight"
        :header-cell-style="{
          'text-align': 'left',
          color: '#000',
          'border-color': '#ccffff',
          background: '#CCFFFF',
        }"
        :cell-style="{ 'text-align': 'left', 'border-color': '#fff' }"
        @row-click="tz"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号" width="80">
          <template scope="scope">
            <span v-if="scope.$index + 1 < 10">00{{ scope.$index + 1 }}</span>
            <span v-if="scope.$index + 1 > 9 && scope.$index + 1 < 100"
              >0{{ scope.$index + 1 }}</span
            >
            <span v-if="scope.$index + 1 > 99">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column width="40">
          <template slot-scope="scope">
            <span
              style="font-size: 25px"
              :style="scope.row.online === 0 ? 'color:#aaa' : 'color:#0d0'"
              >●</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="dev_id" width="220" style="text-align: 'left'">
          <template slot="header">
            MAC
            <!-- 点击搜索框1 -->
            <el-popover placement="bottom" trigger="click">
              <MACinput @filtermac="filtermacTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column prop="dev_type_name">
          <template slot="header">
            设备类型
            <!-- 点击搜索框2 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityTypeinput @filter="filterTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column width="350">
          <template slot="header">
            设备名称
            <!-- 点击搜索框3 -->
            <el-popover placement="bottom" trigger="click">
              <FacilityNameinput @filtername="filternameTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span v-show="show">
              {{ scope.row.name || "--" }}
            </span>
            <el-input
              width="180"
              v-model="scope.row.name"
              @change="changeDevInfo(scope.row)"
              type="text"
              placeholder="输入设备名称"
              @click.native.stop="cc"
              v-show="!show"
            />
          </template>
        </el-table-column>

        <el-table-column>
          <template slot="header">
            所在空间
            <!-- 点击搜索框4 -->
            <el-popover placement="bottom" trigger="click">
              <LocationSpaceinput @filterspace="filterspaceTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <!-- 所在空间 -->
          <template slot-scope="scope">
            <span v-show="show">{{ scope.row.area.name || "--" }}</span>
            <el-select
              v-show="!show"
              style="width: 100%"
              v-model="scope.row.area.area_id"
              filterable
              placeholder="请选择"
              @change="changeDevInfo(scope.row)"
            >
              <el-option
                v-for="item in options"
                :key="item.area_id"
                :label="item.name"
                :value="item.area_id"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="address2">
          <template slot="header">
            图位编号
            <!-- 点击搜索框5 -->
            <el-popover placement="bottom" trigger="click">
              <MapNumberinput @filterposition="filterpositionTable" />
              <i slot="reference" class="el-icon-caret-bottom"></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <span v-show="show">{{ scope.row.position }}</span>
            <el-input
              v-model="scope.row.position"
              type="text"
              @change="changeDevInfo(scope.row)"
              @click.native.stop="cc"
              v-show="!show"
              placeholder="输入编号"
            />
          </template>
        </el-table-column>

        <el-table-column width="80">
          <template v-if="show" slot="header">操作</template>
          <template v-if="show" slot-scope="scope">
            <el-button
              v-if="scope.row.properties.length > 3"
              type="text"
              size="mini"
              @click="addparameter(scope.$index, scope.row, $event)"
              >参数</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          label="开关"
          @change="cc"
          @click.native.stop="cc"
          width="70"
        >
          <!-- 列表的开关 -->
          <template slot-scope="scope">
            <el-tag @change="cc" @click.native.stop="cc">
              <i
                @click="
                  () => {
                    scope.row.on = !scope.row.on;
                    sendCommand(
                      scope.row,
                      scope.row.on,
                      scope.row.properties.find((x) => x.cmd_name == 'switch'),
                      scope.row.ep_id
                    );
                  }
                "
                v-if="scope.row.show_func_switch && scope.row.online"
                style="font-weight: 800; font-size: 28px"
                class="el-icon-switch-button"
                :style="scope.row.on ? 'color:#0d0' : 'color: red'"
              ></i
            ></el-tag>
          </template>
        </el-table-column>
        <!-- 复选框 -->
        <el-table-column width="65" v-if="!CheckboxShow" type="selection">
          <template slot="header"></template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom-button">
      <div class="button-edit" v-if="show">
        <el-button type="primary" @click="editQuipment">编辑设备</el-button>
        <!-- <el-button @click="isOpenSelect" type="primary">删除设备</el-button> -->
      </div>
      <div v-else class="all-text-button">
        <!-- <p style="color: red">开启开关的时候，呼吸三次后常亮</p> -->
        <el-button type="info" @click="delEquipment">删除设备</el-button>
        <el-button type="primary" @click="saveSet">保存设置</el-button>
      </div>
    </div>

    <!-- <el-dialog  el-popover -->
    <el-dialog
      title="参数配置"
      :visible.sync="showTheModule"
      v-if="showTheModule"
      :append-to-body="true"
      :style="{
        position: 'absolute',
        top: dialogTop - 115 + 'px',
        right: -10 + 'px',
      }"
    >
      <div class="setDialog">
        <el-tag>
          <div class="tag-top">
            <span style="color: #4b678d; font-size: 16px; font-weight: 600">{{
              value.dev_type_name
            }}</span>

            <span style="color: #686c77; font-size: 14px">
              <i class="el-icon-location-outline"></i>
              {{ csname }}</span
            >
            <!-- <template slot-scope="scope">  scope.row.area.name -->
          </div>
          <div class="tag-bottom">
            <span
              >{{ value.dev_type_name }} &nbsp;&nbsp;&nbsp;
              <span>MAC: {{ value.dev_id }}</span></span
            >
          </div>
        </el-tag>
        <div class="tag-schedule">
          <!-- 开 关 -->
          <span
            v-if="value.show_func_switch && value.online"
            style="display: inline-flex"
            >开关
            <i
              @click="
                () => {
                  value.on = !value.on;
                  sendCommand(
                    value,
                    value.on,
                    value.properties.find((x) => x.cmd_name == 'switch'),
                    value.ep_id
                  );
                }
              "
              style="font-weight: 800; font-size: 28px"
              class="el-icon-switch-button"
              :style="value.on ? 'color:#0d0' : 'color: red'"
            ></i
          ></span>
          <!-- 温 度 -->
          <span
            v-if="
              value.properties.find((x) => x.cmd_name == 'target_temperature')
            "
            >温度
            <p class="block">
              <el-slider
                @change="
                  sendCommand(
                    value,
                    value.target_temp * 10,
                    value.properties.find(
                      (x) => x.cmd_name == 'target_temperature'
                    ),
                    value.ep_id
                  )
                "
                v-model="value.target_temp"
                :min="16"
                :max="32"
              ></el-slider>
            </p>
          </span>
          <!-- 亮 度 -->
          <span v-if="value.properties.find((x) => x.cmd_name == 'brightness')">
            亮度
            <p class="block">
              <el-slider
                v-model="value.brightness"
                :max="255"
                @change="
                  sendCommand(
                    value,
                    value.brightness,
                    value.properties.find((x) => x.cmd_name == 'brightness'),
                    value.ep_id
                  )
                "
              ></el-slider>
            </p>
          </span>
          <!-- 色 温 -->
          <span v-if="value.properties.find((x) => x.cmd_name == 'cct')">
            色温
            <p class="blocksw">
              <el-slider
                :max="5000"
                :step="1"
                @change="
                  sendCommand(
                    value,
                    value.cct,
                    value.properties.find((x) => x.cmd_name == 'cct'),
                    value.ep_id
                  )
                "
                v-model="value.cct"
              ></el-slider>
            </p>
          </span>

          <!-- 模 式 -->
          <span v-if="value.properties.find((x) => x.cmd_name == 'air_mode')">
            <div>模式:</div>
            <el-select
              class="applySelect"
              placeholder="请选择"
              v-model="value.air_mode"
              @change="
                sendCommand(
                  value,
                  value.air_mode,
                  value.properties.find((x) => x.cmd_name == 'air_mode'),
                  value.ep_id
                )
              "
            >
              <el-option
                v-for="item in PopUpData.mode.define.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </span>
          <!-- 档 位 -->
          <span v-if="value.properties.find((x) => x.cmd_name == 'wind_speed')">
            档位:
            <el-select
              class="applySelect"
              placeholder="请选择"
              v-model="value.wind_speed"
              @change="
                sendCommand(
                  value,
                  value.wind_speed,
                  value.properties.find((x) => x.cmd_name == 'wind_speed'),
                  value.ep_id
                )
              "
            >
              <el-option
                v-for="item in PopUpData.gearPosition.define.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </span>
          <!--    智能平开帘电机    -->
          <!-- v-if="value.dev_type_name.indexOf('卷帘') !== -1" && value.properties.find((x) => x.cmd_name == 'open_level' -->
          <template
            v-if="
              !value.settingMode &&
              value.properties.find((x) => x.cmd_name == 'motor')
            "
          >
            <span
              >开合度
              <p class="block1">
                <el-slider
                  :max="100"
                  :step="1"
                  @change="
                    sendCommand(
                      value,
                      value.open_level,
                      value.properties.find((x) => x.cmd_name == 'open_level'),
                      value.ep_id
                    )
                  "
                  v-model="value.open_level"
                ></el-slider>
              </p>
              {{ value.open_level }}%
            </span>
            <span>
              <!-- <el-button>‹ ›</el-button>
              <el-button>› ‹</el-button> -->
            </span>
          </template>
          <!-- 卷帘的开合度 -->
          <div>
            <div
              v-show="
                value.settingMode &&
                value.properties.find((x) => x.cmd_name == 'motor')
              "
            >
              <span>
                开合度
                <p class="block1">
                  <el-slider
                    :max="100"
                    :min="0"
                    :step="1"
                    step-strictly
                    @change="
                      sendCommand(
                        value,
                        value.open_level,
                        value.properties.find(
                          (x) => x.cmd_name == 'open_level'
                        ),
                        value.ep_id
                      )
                    "
                    v-model="value.open_level"
                  ></el-slider>
                </p>
                {{ value.open_level }}%
              </span>
              <!-- <span>
                <el-button>‹ ›</el-button>
                <el-button>| | |</el-button>
                <el-button>ㅡ</el-button>
                <el-button>› ‹</el-button>
              </span> -->
            </div>

            <!-- 智能卷帘电机 -->
            <template v-if="value.dev_type_name.indexOf('卷帘') !== -1">
              <div class="pop-area-item">
                <div class="item-top-area">
                  <!-- <div>上行程设置</div> -->
                  <div class="item-top-button-area">
                    <el-button
                      @click="topRouteGoTop(value)"
                      v-show="butom"
                      style="width: 60px"
                    >
                      <i class="el-icon-arrow-up"> </i>
                    </el-button>
                    <el-button
                      v-if="!butom"
                      @click="topRouteSave(value)"
                      style="width: 60px"
                      >&nbsp;||</el-button
                    >
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button
                      @click="bottomRouteGoBottom(value)"
                      v-if="butomshow"
                      style="width: 60px"
                    >
                      <i class="el-icon-arrow-down"></i>
                    </el-button>

                    <el-button
                      @click="bottomRouteSave(value)"
                      v-if="!butomshow"
                      style="width: 60px"
                      >&nbsp;||</el-button
                    >

                    <!-- <el-button style="width: 55px">
                      <i
                        class="el-icon-arrow-down icon"
                        @click="topRouteGoBottom(value)"
                      >
                      </i>
                    </el-button> -->
                  </div>
                </div>
              </div>
              <!-- //////////////////////////////// -->
              <!-- <el-slider
                v-if="value.properties.find((x) => x.cmd_name == 'open_level')"
                :max="
                  value.properties.find((x) => x.cmd_name == 'open_level')
                    .define.max
                "
                :min="
                  value.properties.find((x) => x.cmd_name == 'open_level')
                    .define.min
                "
                :step="
                  value.properties.find((x) => x.cmd_name == 'open_level')
                    .define.step
                "
                step-strictly
                v-model="value.open_level"
                @change="
                  sendCommand(
                    value,
                    value.open_level,
                    value.properties.find((x) => x.cmd_name == 'open_level'),
                    value.ep_id
                  )
                "
                style="width: 240px; height: 20px; margin: 20px 35px"
              >
              </el-slider> -->
              <!-- //////////////////////////////////// -->
              <div class="item-top-area">
                <div class="item-top-button-area">
                  <!-- <el-button style="width: 55px">
                    <i
                      class="el-icon-arrow-up"
                      @click="bottomRouteGoTop(value)"
                    >
                    </i>
                  </el-button> -->
                </div>
              </div>
            </template>

            <!-- 电机窗帘底部 -->

            <div
              v-if="
                value.settingMode &&
                value.properties.find((x) => x.cmd_name == 'run_mode')
              "
            >
              <div>方向设置:</div>
              <el-switch
                class="switch"
                v-model="value.run_mode"
                inactive-color="#409EFF"
                active-text="正向"
                inactive-text="反向"
                :active-value="1"
                :inactive-value="2"
                @change="
                  sendCommand(
                    value,
                    value.run_mode,
                    value.properties.find((x) => x.cmd_name == 'run_mode'),
                    value.ep_id
                  )
                "
              ></el-switch>
            </div>
            <div
              class="bottom-area"
              v-if="value.properties.find((x) => x.cmd_name == 'open_level')"
            >
              <el-divider></el-divider>
              <div class="bottom-area">
                <el-button
                  type="text"
                  style="float: right"
                  @click="value.settingMode = !value.settingMode"
                  class="top-button setting-button"
                  >{{ value.settingMode ? "退出设置" : "设置" }}</el-button
                >
                <el-button
                  type="text"
                  v-if="value.settingMode"
                  class="top-button"
                  @click="routeReset(value)"
                  >行程初始化</el-button
                >
              </div>
            </div>
          </div>
          <!-------------->
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Api from "../../api/api";
import MACinput from "@/components/cominput/MACinput.vue";
import FacilityTypeinput from "@/components/cominput/FacilityTypeinput.vue";
import FacilityNameinput from "@/components/cominput/FacilityNameinput.vue";
import LocationSpaceinput from "@/components/cominput/LocationSpaceinput.vue";
import MapNumberinput from "@/components/cominput/MapNumberinput.vue";

export default {
  components: {
    MACinput,
    LocationSpaceinput,
    FacilityTypeinput,
    FacilityNameinput,
    MapNumberinput,
  },
  data() {
    return {
      tableHeight: window.innerHeight - 150,
      loading: true, //加载动画
      butom: true,
      butomshow: true,
      slider: 0,
      slider1: 0,
      options: [],
      csname: "",
      value: "",
      PopUpData: {},
      list: [],
      filteredData: [],
      // localSid: localStorage.getItem("sid"),
      localSid: "577688740d9d258b92c61e6b1f5498ff",
      iconkaiguan: true,
      responsive: true,
      show: true,
      CheckboxShow: true,
      state: "",
      dialogTop: 0,
      showTheModule: false, //弹窗状态
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  async created() {
    let res = await Api.query_areas({ params: { sid: this.localSid } });
    this.options = res.result.areas;

    //带有mac列数据的接口
    let res2 = await Api.exc({
      params: { sid: this.localSid },
    });

    res2.result.device_ep_list.forEach((el) => {
      this.$set(el, "settingMode", false);
      this.$set(el, "openLevelIsClose", false);
      this.$set(el, "brightnessIsClose", false);
      this.$set(el, "openLevelIsOpen", false);
      this.$set(el, "brightnessIsOpen", false);
      this.$set(el, "popVisible", false);
      this.$set(el, "isHighLight", false);
      this.$set(el, "timer", null);
      if (el.rgb) {
        this.$set(el, "colors", "#" + el.rgb);
      }
      if (el.target_temp) {
        el.target_temp = el.target_temp / 10;
      }
    });
    console.log("进来了res2>", res2);
    function compare(property) {
      return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value2 - value1;
      };
    }
    res2.result.device_ep_list.sort(compare("online"));
    this.list = res2.result.device_ep_list;
    this.filteredData = JSON.parse(JSON.stringify(this.list));

    this.loading = false;
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    filtermacTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData = this.list.filter((row) => {
          return row.dev_id.includes(keywords);
        });
      }
    },
    filternameTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData = this.list.filter((row) => {
          return row.name.includes(keywords);
        });
      }
    },
    filterspaceTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData = this.list.filter((row) => {
          return row.area.name.includes(keywords);
        });
      }
    },
    filterpositionTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData = this.list.filter((row) => {
          return row.position.includes(keywords);
        });
      }
    },
    filterTable(keywords) {
      if (keywords.trim() === "") {
        this.filteredData = JSON.parse(JSON.stringify(this.list));
      } else {
        this.filteredData = this.list.filter((row) => {
          return row.dev_type_name.includes(keywords);
        });
      }
    },
    // 编辑设备
    editQuipment() {
      this.show = !this.show;
      this.CheckboxShow = !this.CheckboxShow;
    },
    // 修改设备名称
    async changeDevInfo(row) {
      console.log("row>>>", row);
      await Api.update_device_ep_detail({
        params: {
          sid: this.localSid,
          device_ep_list: [
            {
              dev_id: row.dev_id,
              ep_id: row.ep_id,
              name: row.name,
              area: { area_id: row.area.area_id },
              position: row.position,
            },
          ],
        },
      });
      this.$message({
        type: "success",
        message: "修改成功",
      });
    },
    initWebSocket() {
      let protocol;
      if (window.location.protocol == "http:") {
        protocol = "ws";
      }
      if (window.location.protocol == "https:") {
        protocol = "wss";
      }

      const wsuri = `${protocol}://${window.location.hostname}:9090`;
      // const wsuri = `ws://192.168.200.126:9090`;
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    // 亮度色温控制条
    websocketonmessage(e) {
      console.log(window.location.href);
      const redata = JSON.parse(e.data);
      console.log(redata);
      let { dev_id, ep_id, state_type, state_value } = redata;
      // let index;
      let prop;
      // this.list.map((x, idx, arr) => {
      this.list.map((x) => {
        if (x.dev_id == dev_id && x.ep_id == ep_id) {
          if (x.timer) {
            clearTimeout(x.timer);
          }
          prop = x.properties.find((y) => y.cmd_type == state_type);
          x.isHighLight = true;

          if (prop) {
            if (prop.cmd_name == "switch") {
              x.on = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "brightness") {
              x.brightness = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "target_temperature") {
              x.target_temp = parseInt(state_value, 16) / 10;
            }
            if (prop.cmd_name == "rgbw") {
              let rgb = state_value.substr(0, 6);
              let white = parseInt(state_value.substr(6), 16);
              let red = parseInt(state_value.substr(0, 2), 16);
              let green = parseInt(state_value.substr(2, 2), 16);
              let blue = parseInt(state_value.substr(4, 2), 16);

              x.colors = "#" + rgb;
              x.white = white;
              x.red = red;
              x.green = green;
              x.blue = blue;
            }
            if (prop.cmd_name == "white") {
              x.white = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "cct") {
              x.cct = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "sensor_sensitivity") {
              x.sensitivity = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "sensor_out_delay") {
              x.out_delay = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "air_mode") {
              x.air_mode = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "wind_speed") {
              x.wind_speed = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "set_ep_type") {
              x.dev_ep_type = parseInt(state_value, 16);
            }
            if (prop.cmd_name == "open_level" || prop.cmd_name == "motor") {
              let isStop = parseInt(state_value.substr(0, 2), 16);
              if (isStop == 2) {
                x.open_level = parseInt(state_value.substr(2, 2), 16);
              }
            }
            if (
              prop.cmd_name == "brightness_level" ||
              prop.cmd_name == "brightness_motor"
            ) {
              let isStop = parseInt(state_value.substr(0, 2), 16);
              if (isStop == 2) {
                x.brightness_open_level = parseInt(
                  state_value.substr(2, 2),
                  16
                );
              }
            }
            if (prop.cmd_name == "run_mode") {
              x.run_mode = parseInt(state_value, 16);
            }
          }
          // index = idx;
          x.timer = setTimeout(() => {
            x.isHighLight = false;
          }, 6000);
        }
      });
    },
    //智能平开电机的张开
    async motorClose(value) {
      value.openLevelIsClose = !value.openLevelIsClose;
      if (value.openLevelIsClose) {
        await this.sendCommand(
          value,
          0,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
        value.openLevelIsOpen = false;
      }
      if (!value.openLevelIsClose) {
        await this.sendCommand(
          value,
          2,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
        value.openLevelIsOpen = false;
      }
    },
    //智能平开电机的合并
    async motorOpen(value) {
      value.openLevelIsOpen = !value.openLevelIsOpen;
      if (value.openLevelIsOpen) {
        await this.sendCommand(
          value,
          1,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
        value.openLevelIsClose = false;
      }
      if (!value.openLevelIsOpen) {
        await this.sendCommand(
          value,
          2,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
        value.openLevelIsClose = false;
      }
    },
    // 智能卷帘电机（上行程部分）
    async topRouteGoTop(value) {
      this.butom = !this.butom;
      await this.sendCommand(
        value,
        1,
        value.properties.find((x) => x.cmd_name == "delete_curtain_travel"),
        value.ep_id
      );
      setTimeout(async () => {
        await this.sendCommand(
          value,
          1,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
      }, 200);
    },
    async topRouteSave(value) {
      this.butom = !this.butom;
      await this.sendCommand(
        value,
        2,
        value.properties.find((x) => x.cmd_name == "motor"),
        value.ep_id
      );
      await this.sendCommand(
        value,
        1,
        value.properties.find((x) => x.cmd_name == "set_curtain_travel"),
        value.ep_id
      );
    },
    async topRouteGoBottom(value) {
      await this.sendCommand(
        value,
        1,
        value.properties.find((x) => x.cmd_name == "delete_curtain_travel"),
        value.ep_id
      );
      setTimeout(async () => {
        await this.sendCommand(
          value,
          0,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
      }, 200);
    },
    // 智能卷帘电机（下行程部分）
    async bottomRouteGoTop(value) {
      await this.sendCommand(
        value,
        2,
        value.properties.find((x) => x.cmd_name == "delete_curtain_travel"),
        value.ep_id
      );
      setTimeout(async () => {
        await this.sendCommand(
          value,
          1,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
      }, 200);
    },
    async bottomRouteSave(value) {
      this.butomshow = !this.butomshow;
      await this.sendCommand(
        value,
        2,
        value.properties.find((x) => x.cmd_name == "motor"),
        value.ep_id
      );
      await this.sendCommand(
        value,
        2,
        value.properties.find((x) => x.cmd_name == "set_curtain_travel"),
        value.ep_id
      );
    },
    async bottomRouteGoBottom(value) {
      this.butomshow = !this.butomshow;
      await this.sendCommand(
        value,
        2,
        value.properties.find((x) => x.cmd_name == "delete_curtain_travel"),
        value.ep_id
      );
      setTimeout(async () => {
        await this.sendCommand(
          value,
          0,
          value.properties.find((x) => x.cmd_name == "motor"),
          value.ep_id
        );
      }, 200);
    },

    // 列表控制开关
    async sendCommand(row, cmdValue, currentProps, ep_id, fadeTime) {
      let { dev_id, dev_type } = row;
      if (!dev_id && !dev_id > 0) {
        dev_id = this.keyParamsPopData.keyParamsPopDevId;
      }
      if (!dev_type && !dev_type > 0) {
        dev_type = this.keyParamsPopData.keyParamsPopDevType;
      }

      let cmd = Number(cmdValue).toString(16);
      function countNumbers(str) {
        var sum = 0;
        var arr = str.split("");
        for (let i = 0, len = arr.length; i < len; i++) {
          sum++;
        }
        return sum;
      }

      let sum = countNumbers(cmd);
      if (sum == 1 || sum == 3 || sum == 5 || sum == 7) {
        cmd = "0" + cmd;
      }
      if (!fadeTime && row.dev_type_name.includes("驱动")) {
        cmd = cmd + "0F";
      }
      if (fadeTime && row.dev_type_name.includes("驱动")) {
        cmd = cmd + "00";
      }
      let cmd_type = currentProps.cmd_type;
      let dev_ep_id = 1;
      if (ep_id) {
        dev_ep_id = ep_id;
      }
      await Api.send_command_data({
        params: {
          sid: this.localSid,
          dev_id,
          dev_type,
          dev_ep_id,
          cmd,
          cmd_type,
        },
      });
    },

    // 阻止冒泡事件（忽略）
    cc() {},
    // 列表任意位置选中复选框
    tz(row, column, event) {
      this.getIndex = row.index;
      console.log(row, column, event);
      this.$refs.table.toggleRowSelection(row);
    },
    kaiguan() {
      this.iconkaiguan = !this.iconkaiguan;
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    // 取消保存
    // cancelSave() {
    //   this.show = true;
    // },
    // 点击复选框获取本行内容
    handleSelectionChange(e) {
      console.log(e);
      this.selection = e;
    },
    // 删除设备
    async delEquipment() {
      // console.log(id);
      // this.tableData = this.tableData.filter((item) => item.id != id);
      let devIdList = [];
      this.selection.forEach((el) => {
        devIdList.push(el.dev_id);
        let index = this.list.findIndex((v) => {
          return v.dev_id == el.dev_id;
        });
        this.list.splice(index, 1);
      });
      await Api.delete_devices({
        params: { sid: this.localSid, dev_id_list: devIdList },
      });
    },
    // 保存设置
    saveSet() {
      this.show = !this.show;
      this.CheckboxShow = !this.CheckboxShow;
      this.$message({
        type: "success",
        message: "保存成功!",
      });
    },
    // 打开弹窗
    addparameter(index, row, event) {
      const button = event.target;
      const buttonRect = button.getBoundingClientRect();
      const yPosition = buttonRect.bottom;
      this.dialogTop = yPosition;
      const screenHeight = window.innerHeight;

      // 判断屏幕是否能放下对话框
      if (screenHeight - yPosition > 350) {
        // 150为对话框高度，根据实际情况调整
        this.dialogTop = yPosition;

        console.log("this.dialogTop >", this.dialogTop);
      } else {
        // 若放不下，则在按钮的正上方
        this.dialogTop = buttonRect.top - 400; // 150为对话框高度，根据实际情况调整
      }

      this.showTheModule = !this.showTheModule;
      this.csname = row.area.name;
      this.value = row;
      this.PopUpData = {
        gearPosition: row.properties.find((x) => x.cmd_name == "wind_speed"),
        temperature: row.properties.find(
          (x) => x.cmd_name == "target_temperature"
        ),

        mode: row.properties.find((x) => x.cmd_name == "air_mode"),
        sensitivity: row.properties.find(
          (x) => x.cmd_name == "sensor_sensitivity"
        ),

        Delay_time: row.properties.find(
          (x) => x.cmd_name == "sensor_out_delay"
        ),

        Color_temperature: row.properties.find((x) => x.cmd_name == "cct"),
        attribute: row.properties.find((x) => x.cmd_name == "set_ep_type"),

        ep_id: row.ep_id,
        wind_speed: row.wind_speed,
        air_mode: row.air_mode,
        target_temp: row.target_temp,
      };
      console.log("this.PopUpData>>>>>", this.PopUpData);
      console.log("点击本行的数据<row>>>", row);
      console.log(this.csname);
      // return this.csname;
    },
    // 点击行更换背景色
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    rowClick(row) {
      this.getIndex = row.index;
    },
    selectedstyle({ rowIndex }) {
      if (this.getIndex === rowIndex) {
        return { "background-color": "#ccffff" };
      }
    },
    // 行程初始化
    async routeReset(value) {
      await this.sendCommand(
        value,
        1,
        value.properties.find((x) => x.cmd_name == "delete_curtain_travel"),
        value.ep_id
      );
      await this.sendCommand(
        value,
        2,
        value.properties.find((x) => x.cmd_name == "delete_curtain_travel"),
        value.ep_id
      );
    },

    // 关闭弹窗
    exitDialog() {
      this.showTheModule = !this.showTheModule;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 引入css类 */
.main-conent-minheight {
  /* 设置高度 */
  width: 100%;
  height: calc(100vh - 80px);
}
.item-top-area {
  /* 设置flex布局 */
  // display: flex;
  // width: 100%;
  // justify-content: space-between;
  // align-items: center;
  // border: 2px solid rgb(180, 199, 231);
  // box-sizing: border-box;
  // padding: 0 20px;

  .item-top-button-area {
    /* 设置字体大小 */
    font-size: 28px;
  }
}

/* 去除滚动条留白 */
::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}
::v-deep .el-table__body {
  width: 100% !important;
}
.el-card__body {
  /* 设置宽度和高度 */
  width: 98%;
  margin-left: 2%;
  line-height: 34px;
  box-sizing: border-box;

  /* 去除滚动条留白 */
  ::v-deep .el-table th.gutter {
    display: none;
    width: 0;
  }
  ::v-deep .el-table colgroup col[name="gutter"] {
    display: none;
  }
  ::v-deep .el-table__body {
    width: 100% !important;
  }
  /* 去除滚动条 */
  ::-webkit-scrollbar {
    display: none;
  }

  input {
    /* 设置输入框样式 */
    width: 180px;
    height: 30px;
    background-color: #eeeeee;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

.bottom-button {
  /* 设置底部按钮位置 */
  position: absolute;
  bottom: 2%;
  right: 3%;
}
::v-deep .el-tag {
  /* 设置标签样式 */
  background-color: hsla(0, 0%, 100%, 0);
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: none;
}
.applySelect {
  /* 设置应用选择器宽度 */
  width: 300px;
}
// 去除下拉框的icon
::v-deep .applySelect .el-icon-arrow-up:before {
  content: "";
}
::v-deep .el-card__body,
.el-main {
  padding: 0 0 0 0 !important;
}

.pop-area-item {
  /* 设置弹出框区域样式 */
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin-top: 10px;
  margin-right: 50px;
}
.setting-area {
  /* 设置设置区域样式 */
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.el-dialog__wrapper {
  overflow: visible !important;
}

::v-deep .el-dialog {
  /* 设置对话框样式 */
  width: 400px;
  position: absolute;
  right: 40px;
  border-radius: 8px;
  box-shadow: 0px 5rpx 10rpx 0px rgba(102, 156, 255, 0.25);

  .el-dialog__header {
    /* 设置对话框头部样式 */
    border-bottom: 4px #ddd solid;

    span {
      font-weight: 600;
    }
  }

  .setDialog {
    /* 设置对话框样式 */
    width: 100%;
    display: inline-block;
    flex-wrap: wrap;

    .el-tag {
      /* 设置标签样式 */
      background-color: #f5f8fe;
      width: 90%;
      height: 70px;
      display: flex;
      flex-wrap: wrap;

      .tag-top {
        /* 设置标签顶部样式 */
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

      .tag-bottom {
        /* 设置标签底部样式 */
        width: 100%;
      }
    }

    .tag-schedule {
      /* 设置标签进度样式 */
      width: 100%;
      height: 150px;

      span {
        /* 设置标签进度样式 */
        // width: 100%;
        // height: 33%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        .block {
          /* 设置标签进度样式 */
          width: 250px;
          margin-right: 50px;
        }
        .blocksw {
          /* 设置标签进度样式 */
          width: 250px;
          margin-right: 50px;

          .el-slider__bar {
            /* 设置滑块样式 */
            background-color: rgba(255, 5, 5, 0); // 背景透明
          }

          .el-slider__runway {
            /* 设置滑块样式 */
            background-image: linear-gradient(
              to right,
              // #ffffff,
              #ff0000,
              #fffb00,
              #00ff1e,
              #0059ff
            );
          }
        }
        .block1 {
          width: 250px;
        }
        .c-progress {
          width: 100%;
        }
        i {
          margin-right: 290px;
        }
      }
    }
  }
}
</style>
